﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Dot Density Renderer - Multiple Variables</title>
    <link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
      }
      #map {
        background-color: #000
      }
      #infopane {
        position: absolute;
        width: 300px;
        top: 0;
        right: 0;
        background-color: rgba(0,0,0,0.75);
        padding: 10px;
        border-radius: 0 0 0 10px;
        font-family: Segoe UI;
        color: #aaa;
      }
      .esriLegendServiceLabel, #info-title {
        font-weight: 600;
      }
      .hidden {
        display: none;
      }
      #toggle-button {
        cursor: pointer;
      }
    </style>
    <script src="//js.arcgis.com/3.14/"></script>
    <script>
        var map;
        require([
          "esri/map", "esri/geometry/Extent", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/DotDensityRenderer", "esri/renderers/ScaleDependentRenderer",
          "esri/Color", "dojo/query", "dojo/dom", "esri/dijit/Legend", "dojo/domReady!"
        ], function (Map, Extent, FeatureLayer, InfoTemplate, ArcGISTiledMapServiceLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, DotDensityRenderer, ScaleDependentRenderer, Color, query, dom, Legend) {
            map = new Map("map", {
                center: [-122.12, 37.60],
                zoom: 10,
                maxZoom: 12,
                minZoom: 9
            });

            var basemap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer", {
                opacity: 0.15
            });
            map.addLayer(basemap);

            var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BayAreaWorkingClasses/FeatureServer/0", {
                outFields: ["CC", "SC", "WC", "FFF"]
            });
            //一个点代表的价值。dotValue
            var createRenderer = function (dotValue) {
                return new DotDensityRenderer({//点密度渲染器
                    fields: [{
                        name: "CC",
                        color: new Color([21, 137, 255])
                    }, {
                        name: "SC",
                        color: new Color([200, 111, 0])
                    }, {
                        name: "WC",
                        color: new Color([0, 255, 0])
                    }, {
                        name: "FFF",
                        color: new Color([255, 0, 0])
                    }],
                    dotValue: dotValue,
                    dotSize: 2,
                    outline: new SimpleLineSymbol("solid", new Color([50, 50, 50, 1]), 0.5),
                    legendOptions: {
                        valueUnit: "people",
                        backgroundColor: new Color([32, 32, 32])
                    }
                });
            };
            //设置放大比例尺，显示的点密度适配器
            var rendererInfos = [
              {
                  renderer: createRenderer(400),
                  maxZoom: 9,
                  minZoom: 9
              }, {
                  renderer: createRenderer(100),
                  maxZoom: 10,
                  minZoom: 10
              }, {
                  renderer: createRenderer(25),
                  maxZoom: 11,
                  minZoom: 11
              }, {
                  renderer: createRenderer(6),
                  maxZoom: 12,
                  minZoom: 12
              }
            ];

            var scaleDependentRenderer = new ScaleDependentRenderer({//比例尺渲染器
                rendererInfos: rendererInfos//渲染器信息参数
            });
            layer.setRenderer(scaleDependentRenderer);
            map.addLayer(layer);

            var legend = new Legend({
                map: map,
                layerInfos: [{ layer: layer }]
            }, "legend");
            legend.startup();

            dom.byId("toggle-button").onclick = function () {
                query(".toggle-pane").toggleClass("hidden");
            };
        });
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="infopane">
      <div id="toggle-button">[Toggle/expand information pane]</div>
      <div class="toggle-pane">
        <div id="legend"></div>
      </div>
    </div>
  </body>
</html> 
